<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title >直播间销售统计</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;">
    <style type="text/css">
        .update {
            display: inline-block;
            margin-left: 15px;
            padding: 0 20px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            background: #009789;
            color: #fff;
            text-align: center;
            border-radius: 3px;
            cursor: pointer;
        }

        .update i {
            display: inline-block;
            margin-right: 10px;
            vertical-align: middle;
            width: 30px;
            height: 30px;
            background: url();
        }
        .T-box {
            width: 400px;
            padding: 0 20px;
            text-align: left;
        }

        .T-box p {
            position: relative;
            height: 36px;
            line-height: 36px;
            font-size: 14px;
            margin-bottom: 15px;
        }

        .T-box p span {
            display: inline-block;
            padding-right: 15px;
            text-align: right;
            width: 110px;
            line-height: 36px;
            font-size: 14px;
        }

        .T-box p input, .T-box p select {
            width: 250px;
            padding: 0 5px;
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            border: 1px solid #d3d3d3;
            outline: none;
        }

        .T-box p i {
            padding: 0 10px;
            line-height: 36px;
            font-style: normal;
        }

        .T-box p b {
            display: inline-block;
            margin-left: 10px;
            cursor: pointer;
            width: 60px;
            height: 36px;
            line-height: 36px;
            background: #c33;
            color: #fff;
            text-align: center;
            font-size: 13px;
            font-weight: normal;
        }
    </style>
    <div class="layui-tab layui-tab-brief" lay-filter="demo">
        <ul class="layui-tab-title">

            <li > <a href="/zbj/live_data_list">直播间数据管理</a></li>
            <li class="layui-this"> <a href="/zbj/sales_statistics_douyin">直播间销售统计</a></li>
            <li > <a href="/report/goods_sales_analyse">商品动销分析</a></li>
            <li> <a href="/report/goods_category_analyse">商品类目动销分析</a></li>
            <li > <a href="/zbj/sample_list">直播间样品管理</a></li>
        </ul>
    </div>

    <!-- content starts -->
<!--    <blockquote class="layui-elem-quote">订单总览</blockquote>-->

    <fieldset class="layui-elem-field">
        <legend>按条件搜索</legend>
        <div class="layui-field-box">

            <form class="layui-form layui-form-pane1" method="get" action="/sales/list_dy">

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">下单时间</label>
                        <div class="layui-input-inline">
                            <input type="text"   class="layui-input" name="orderDate" th:value="${orderDate}" id="orderDate" autocomplete="off"
                                  style="width: 160px;" placeholder="yyyy-MM-dd">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="authorId" id="authorId">
                                <option value="">直播间</option>
                                <option th:each="item:${zbjList}" th:value="${item.userId}" th:text="${item.name}"></option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="shopId" id="shopId">
                                <option value="">店铺</option>
                                <option th:each="item:${shopList}" th:value="${item.id}" th:text="${item.name}"></option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-normal">搜索</button>
                        <i>总共：<span style="color: red" th:text="${totalSize}"></span>条记录</i>
                    </div>

                    <div class="layui-inline">
                        <button type="button" lass="button" id="excel_btn" class="layui-btn layui-btn-primary">导出数据</button>
                    </div>


                </div>


            </form>
        </div>
    </fieldset>

    <!-- start dd-wrapper -->
    <link rel="stylesheet" href="/goods/order.css"/>
    <div class="dd-wrapper">
        <table class="dd-table">
            <tr>
                <th>序号</th>
                <th>商品</th>
                <th>款号</th>
                <th>SKU</th>
                <th>数量</th>
                <th>商品总额</th>
                <th>商品采购价</th>
                <th>运费成本</th>
                <th>毛利</th>
                <th>订单号</th>
                <th>下单时间</th>
                <th>订单状态</th>
                <th>店铺</th>
                <th>直播间</th>
            </tr>
            <tr th:each="item:${lists}">
                <td th:text="${itemStat.index +1 }"></td>

                <td>
                    <div ><img th:src="${item.getProductPic()}">
                        <p>
                            <span  th:text="${#strings.abbreviate(item.getProductName(),18)}"></span>
                        </p>
                    </div>
                </td>
                <td th:text="${item.productNum }"></td>
                <td th:text="${item.specNum }"></td>
                <td th:text="${item.num }"></td>
                <td>¥[[${item.totalAmount}]]</td>
                <td>¥[[${item.costPrice}]]</td>
                <td>¥5.00</td>
                <td>
                    ¥<span style="color: red" th:text="${#numbers.formatDecimal(item.getTotalAmount().subtract(item.getCostPrice().multiply(item.getNum())).doubleValue()-5.0,1,2) }"></span>
                </td>
                <td th:text="${item.orderId}"></td>
                <td>
                    <p th:text="${#dates.format(item.createTime*1000, 'yyyy-MM-dd HH:mm')}"></p>
                </td>
                <td>
                    <span th:text="${T(com.b2c.entity.enums.third.EnumDouYinOrderStatus).getThirdStatusName(item.getOrderStatus())}"></span>
                </td>
                <td th:text="${item.shopName}"></td>
                <td th:text="${item.authorName}"></td>
            </tr>
        </table>
    </div>
    <!-- end dd-wrapper -->
    <div class="layui-box layui-laypage layui-laypage-default pageBox">
        <paging:pager th:value="${pageIndex}" th:rows="${totalSize}" th:size="${pageSize}"/>
    </div>

    <script type="text/javascript" src="/goods/Tips/Tips.min.js"></script>
    <script type="text/javascript">
        var layer;
        var $;
        var windowOpen;
        layui.use(['laydate', 'jquery', 'form', 'layer'], function () {
            var laydate = layui.laydate;
            $ = layui.jquery;
            var form = layui.form;
            layer = layui.layer;
            laydate.render({
                elem: '#orderDate'
                ,type: 'date'
            });

            $(function () {
                var shopId = '[[${shopId}]]';
                $("#shopId").val(shopId);
                var authorId = '[[${authorId}]]';
                $("#authorId").val(authorId);
                form.render(); //更新全部
                form.render('select'); //刷新select选择框渲染
            })



            $("#excel_btn").click(function () {
                //组合条件
                var url = "/sales/list_dy_export";
                var orderDate = $("input[name=orderDate]").val();
                var shopId = '[[${shopId}]]';
                var authorId = '[[${authorId}]]';

                if (shopId != '') {
                    url += "?shopId=" + shopId;
                }
                if (orderDate != '') {
                    url += "&orderDate=" + orderDate;
                }
                if (authorId != '') {
                    url += "&authorId=" + authorId;
                }

                window.open(url, "_blank");
            })
            $("#excel_upload_btn").click(function () {
                var excel = $("#excel").val();
                if (excel == '') {
                    alert("请选择文件");
                    return false;
                } else if (excel.lastIndexOf(".xls") < 0) {//可判断以.xls和.xlsx结尾的excel
                    alert("只能上传Excel文件");
                } else if (excel.lastIndexOf(".xlsx") < 0) {
                    alert("只能上传Excel文件");
                } else {
                    var url = "/ajax_douyin/zhubo_order_import_excel_settle";
                    // var formData = new FormData($('#execl_form')[0]);

                    var formData = new FormData();
                    formData.append("excel", document.getElementById("excel").files[0]);
                    $(this).hide();
                    $("#excel_upload_btn_").show();
                    $.ajax({
                        url: url,
                        type: "post",
                        data: formData,
                        success: function (result) {
                            $("#excel_upload_btn_").hide();
                            $("#excel_upload_btn").show();
                            // console.log(result);
                            if (result.code == 0) {
                                alert("导入成功");
                            } else {
                                alert("更新失败:" + result.msg);
                            }
                            // alert(JSON.stringify(result));
                            return false;
                        },
                        error: function () {
                            alert("excel上传失败");
                        },
                        cache: false,
                        contentType: false,
                        processData: false
                    });
                }

                return false;
            })
        });

    </script>

</div>
</body>
<html>
